<template>
	<view style="display: flex;">
		<!-- <view class="log-img">
			<image src="@/static/img/log-img.png" mode=""></image>
		</view> -->
		<view class="log-form">
			<view class="">
				<view class="from-title">欢迎登录</view>
				<view class="from-Text">访客管理系统</view>
			</view>

			<view class="inp-item">
				<view class="">
					<uni-easyinput prefixIcon="person" placeholder="请输入工号" @iconClick="onClick" class="easyinput"
						v-model="formLogin.username"></uni-easyinput>
				</view>
				<view class="">
					<uni-easyinput prefixIcon="locked" type="password" placeholder="请输入密码" @iconClick="onClick"
						class="easyinput" v-model="formLogin.password"></uni-easyinput>
				</view>
			</view>
			<view class="sub-btn" @click="loginUser">
				登录
			</view>

		</view>


	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		$get,
		$post,
		$put
	} from "@/utils/request.js"




	const emit = defineEmits(['loginSuccess'])


	// 登录
	const formLogin = ref({
		username: '',
		password: '',
		grantType: "noCode",
		clientId: 'e5cd7e4891bf95d1d19206ce24a7b32e'
	});


	const loginUser = () => {

		if (!formLogin.value.username) {
			uni.showToast({
				icon: 'none',
				title: '请输入工号'
			})
			return;
		}

		// 验证password是否为空
		if (!formLogin.value.password) {
			uni.showToast({
				icon: 'none',
				title: '请输入密码'
			})
			return;
		}

		$post('/auth/login', formLogin.value).then(res => {
			if (res.code === 200) {
				console.log(res.data.user, '用户信息');
				uni.setStorageSync('token', res.data.access_token);

				emit('loginSuccess', {
					userInfo: res.data.user,
					loginTime: new Date()
				});
				uni.showToast({
					icon: 'success',
					title: '登录成功'
				})
			} else {
				uni.showToast({
					icon: 'error',
					title: res.msg
				})
			}
		})
	}
</script>

<style lang="scss">
	.log-img {
		width: 60%;
		height: 55vh;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.log-form {
		width: 100%;
		height: 50vh;
		padding: 1.4vw;
		box-sizing: border-box;

		.from-title {
			font-size: var(--text-34);
			color: var(--color-32);
			font-weight: 600;
			margin: 0.4vw 0;
		}

		.from-Text {
			font-size: var(--text-16);
			color: var(--color-32);

		}

		.inp-item {
			height: 80px !important;
			min-height: 4vw !important; 
			margin: 2vw 0;
			display: flex;
			flex-direction: column;
			gap: 2vw;

			// 输入框样式
			::v-deep .easyinput .uniui-locked,
			.uniui-person {
				font-size: 1.2vw !important;
			}

			::v-deep .uni-easyinput__content-input {
				height: 2.5vw !important;
				min-height: 2.5vw !important;
				font-size: var(--text-16);
			}

			.uni-easyinput__placeholder-class {
				font-size: var(--text-16);
			}


		}

		.sub-btn:hover {
			transition: all 0.3s ease;
			transform: translateY(-5px);
			box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
		}

		.sub-btn {
			width: 100%;
			height: 2.5vw;
			margin-top: 5vw;
			background-color: var(--color-32);
			color: var(--color-ff);
			font-size: var(--text-18);
			font-weight: 600;
			text-align: center;
			line-height: 2.5vw;
			border-radius: 10vw;
			cursor: pointer;
			letter-spacing: 10px;
			transition: all 0.3s ease;
			transform: translateY(0);
		}



	}
</style>